<template>

	<uni-forms ref="baseForm" :modelValue="baseFormData" :label-width='labelWidth' :border="formBorder">

		<uni-forms-item :style="item.style" :label="item.lable" :required='item.required' :key="index" :rules="item.rules"
			:name='item.fieldName' v-for="(item, index) in baseFormItems" v-if="!item.hide">

			<uni-easyinput :placeholder="item.placeholder" :inputBorder="formItemBorder" :clearable="item.clearable"
				:disabled="item.disabled" :primaryColor="primaryColor" v-model="baseFormData[item.fieldName]"
				v-if="item.type == 'text'" @input="change(item.fieldName, $event)" />

			<uni-easyinput type="textarea" :placeholder="item.placeholder" :disabled="item.disabled"
				:inputBorder="formItemBorder" v-model="baseFormData[item.fieldName]" v-if="item.type == 'textarea'"
				@input="change(item.fieldName)" />

			<wgh-select :placeholder="item.placeholder" :inputBorder="formItemBorder" :primaryColor="primaryColor"
				:localdata="item.options" v-model="baseFormData[item.fieldName]" v-if="item.type == 'select'"
				@clear="baseFormData[item.fieldName] = ''" @change="change(item.fieldName)" />

			<wgh-select-multiple :placeholder="item.placeholder" :inputBorder="formItemBorder" :primaryColor="primaryColor"
				:localdata="item.options" v-model="baseFormData[item.fieldName]" v-if="item.type == 'select-multiple'"
				@clear="baseFormData[item.fieldName] = ''" @change="change(item.fieldName)" />

			<uni-data-checkbox :selectedColor="primaryColor" :localdata="item.options" :disabled="item.disabled"
				v-model="baseFormData[item.fieldName]" v-if="item.type == 'radio'" @change="change(item.fieldName)" />

			<uni-data-checkbox multiple :selectedColor="primaryColor" :localdata="item.options" :disabled="item.disabled"
				v-model="baseFormData[item.fieldName]" v-if="item.type == 'checkbox'" @change="change(item.fieldName)" />



			<uni-datetime-picker :type="item.originalType" return-type="string" :border="formItemBorder"
				:inputBorder="formItemBorder" :placeholder="item.placeholder" :disabled="item.disabled"
				v-model="baseFormData[item.fieldName]" v-if="item.type == 'datetime'" @change="change(item.fieldName)" />



		</uni-forms-item>

	</uni-forms>

</template>

<script>
	/**
	 * SingleForm 单一表单
	 * @description 表单
	 * 
	 * @property {String} formData 表单数据
	 * @property {Object} items 表单项
	 * @property {String} primaryColor 主题色
	 * @property {Number} submitFlag 触发提交的标识，当该值发生变化，则校验表单数据
	 * @property {Boolean} submitCheck 表单数据是否校验通过：true|false
	 * 
	 * @event {Function} change 内容变化触发
	 * @event {Function} submit 监听提交事件
	 */
	export default {
		name: "wgh-form",
		data() {
			return {
				baseFormData: {},
				baseFormItems: {},
			};
		},
		props: {
			formData: {
				type: Object,
				default () {
					return {}
				}
			},
			items: {
				type: Object,
				default () {
					return {}
				}
			},
			primaryColor: {
				type: String,
				default: '#007aff'
			},
			formBorder: {
				type: Boolean,
				default: false
			},
			formItemBorder: {
				type: Boolean,
				default: true
			},
			labelWidth: {
				type: String | Number,
				default: 'auto', // 字符串 为 auto | 数字 为 整数
			},
			submitFlag: {
				type: Number,
				default: 0
			}
		},
		watch: {
			formData: {
				immediate: true,
				handler(val, old) {
					if (old !== val) {
						this.baseFormData = val
					}
				}
			},
			items: {
				immediate: true,
				handler(val, old) {
					this.baseFormItems = val
				}
			},
			submitFlag(val, old) {
				if (val !== old) {
					this.submit();
				}
			}
		},

		methods: {
			// 双向绑定数据
			updateFormData() {
				// this.$emit("update:formData", this.baseFormData);
			},

			submit() {
				this.$refs.baseForm.validate().then(res => {
					// 校验通过
					this.$emit('update:submitCheck', true);
					this.$emit('submit', this.baseFormData)
				}).catch(err => {
					// 校验失败
					// console.log(err, 'err');
					this.$emit('update:submitCheck', false);
					this.$emit('submit', this.baseFormData)
				})
			},

			change(currentItemName, e) {
				console.log(e, 'e');
				// 返回 当前变化项
				this.$emit('change', {
					name: currentItemName,
					value: this.baseFormData[currentItemName]
				})
			},

		}
	}
</script>